<template>
  <div class="flex-1">
    <section class="space-y-5" data-v-09e9f4d4="">
      <div
        class="bg-white p-8 lg:flex lg:divide-x divide-gray-light"
        data-v-09e9f4d4=""
      >
        <div class="flex-1 flex space-x-5 items-center" data-v-09e9f4d4="">
          <div
            class="relative flex items-center justify-center"
            data-v-09e9f4d4=""
            style="width: 80px; height: 80px"
          >
            <img
              class="rounded-full border-2 border-yellow h-full w-full object-center"
              :src="userinfos.avatar"
            />
            <!---->
          </div>
          <div data-v-09e9f4d4="">
            <div class="font-semibold mb-5 flex" data-v-09e9f4d4="">
              <span data-v-09e9f4d4="" v-show="!isShowPhone">{{
                handlePhone
              }}</span>
              <span data-v-09e9f4d4="" v-show="isShowPhone">{{
                userinfos.mobile
              }}</span>
              <div class="cursor-pointer hover:opacity-70" data-v-09e9f4d4="">
                <svg
                  v-show="!isShowPhone"
                  @click="isShowPhone = !isShowPhone"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  class="h-6 w-6 ml-3"
                  data-v-09e9f4d4=""
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                  ></path>
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                  ></path>
                </svg>
                <svg
                  v-show="isShowPhone"
                  @click="isShowPhone = !isShowPhone"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  class="h-6 w-6 ml-3"
                  data-v-09e9f4d4=""
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
                  ></path>
                </svg>
              </div>
            </div>
            <div
              class="sm:flex sm:divide-x space-y-2.5 -ml-5 sm:ml-0 sm:space-y-0 divide-gray-light text-black-70 text-sm"
              data-v-09e9f4d4=""
            >
              <!-- <button class="space-x-2.5 flex px-5 sm:-ml-5" data-v-09e9f4d4="">
                <img
                  class="w-5 h-5"
                  src="https://www.lucksec.cn/img/lock.759d7bda.svg"
                  alt=""
                  data-v-09e9f4d4=""
                /><span data-v-09e9f4d4="">修改update password</span></button
              > -->
              <button
                class="space-x-2.5 flex px-5"
                data-v-09e9f4d4=""
                @click="loginOut"
              >
                <img
                  class="w-5 h-5"
                  src="https://www.lucksec.cn/img/logout.e2610127.svg"
                  alt=""
                  data-v-09e9f4d4=""
                /><span data-v-09e9f4d4="">Log out</span>
              </button>
            </div>
          </div>
        </div>
        <div
          class="flex-1 flex flex-wrap mt-5 lg:mt-0 lg:pl-12 items-center"
          data-v-09e9f4d4=""
        >
          <div class="space-y-2.5 flex-1" data-v-09e9f4d4="">
            <h3 class="text-black-50" data-v-09e9f4d4="">Balance</h3>
            <p class="text-yellow text-xl font-semibold" data-v-09e9f4d4="">
              Ł {{ userinfos.money }}
            </p>
          </div>
          <div class="space-y-2.5 flex-1" data-v-09e9f4d4="">
            <h3 class="text-black-50" data-v-09e9f4d4="">Diamonds</h3>

            <p class="text-black text-xl font-semibold" data-v-09e9f4d4="">
              💎 0
            </p>
          </div>
          <button
            @click="changePayModal(true)"
            type="button"
            class="rounded no-underline border flex items-center justify-center shadow text-black-85 border-transparent hover:bg-yellow-light active:shadow-yellow py-2 px-3 sm:px-4 text-xs sm:text-base bg-variants-primary w-full sm:w-[120px] mt-5 sm:mt-0"
            data-v-09e9f4d4=""
          >
            <div>recharge</div>
            <!---->
          </button>
        </div>
      </div>
      <!-- <div class="p-5" data-v-09e9f4d4="">
        <header class="mb-10 relative">
          <h4 class="text-xl font-semibold">最近配送</h4>
          <a
            href="/user-center/delivery-record"
            class="text-xs absolute right-0 top-0 flex items-center"
            ><span>查看全部</span
            ><img
              class="w-4 h-4 -mt-0.5"
              src="https://www.lucksec.cn/img/view-all.6ce9e05a.svg"
          /></a>
        </header>
        <div class="-m-5 space-y-5"></div>
        <div class="w-full p-5 bg-[#F7F7F7]">
          <div class="w-[150px] mx-auto">
            <img
              src="https://www.lucksec.cn/img/placeholder.64d264f7.svg"
              width="150"
            />
            <p class="text-center">您最近没有配送 <br /><br /></p>
          </div>
        </div>
      </div> -->
      <!---->
    </section>
  </div>
</template>
<script>
import { mapMutations } from "vuex";

export default {
  created() {
    this.$api.userinfos().then((res) => {
      this.userinfos = res.data.data;
    });
  },
  data() {
    return {
      userinfos: {},
      isShowPhone: false,
    };
  },
  computed: {
    handlePhone() {
      let arr = this.userinfos.mobile?.split("");
      arr?.splice(3, 4, "****");
      return arr?.join("");
    },
  },
  methods: {
    ...mapMutations({
      setUserinfo: "user/setUserinfo",
      changePayModal: "user/changePayModal",
    }),
    loginOut() {
      localStorage.removeItem("token");
      localStorage.removeItem("userinfo");
      this.$api.logout().then((res) => {
        this.setUserinfo({});
      });
    },
  },
};
</script>
<style lang="" scoped></style>
